<template>
  <div class="wrapper">
    <div class="sub_title lr_nav_bot_bd">
      <div class="safe_area_box"></div>
      <div class="tit_txt">
        <div class="ic"><i style="font-size: 18px;" class="iconfont lricon-fanhui1"></i>
        </div>
        <span> (六壬起个课APP-资料搜索)</span>
        <div class="ic"></div>
      </div>
    </div>
    <div ref="searchBox" class="search_wrapper">
      <div class="left"><i class="iconfont lricon-sousuo" style="font-size: 18rem;"></i>
      </div>
      <input placeholder="输入内容搜索" @keydown="search" type="search" v-model="searchKW" class="mid editable-div"></input>
      <div class="right" @click.stop="onCancelSearch">取消</div>
    </div>
    <div class="sctotal">总共查到<span style="color: red;">{{ bookResultL.length }}</span>本书籍</div>
    <div class="book_content">
      <div @click="toReader(item.title)" class="book_item" v-for="(item, index) in bookResultL">
        <div class="book">
          <div class="book_fengmian">
            <div class="left">
              <div class="b1">
                <div class="b2">{{ item.title }}</div>
              </div>
            </div>
            <div class="right">
              <div style="border-top: none"></div>
              <div></div>
              <div></div>
              <div></div>
              <div style="border-bottom: none"></div>
            </div>
          </div>
          <div class="tit">
            <div class="bkrdp">{{ getRdPercent(item.title) }}%</div>
            <div class="bktit">{{ item.title }}</div>
          </div>
        </div>
        <div class="search_results">
          <div class="result_item">
            <div class="total">总共<span style="color: red;">{{ item.result.length }}</span>处相关信息</div>
            <div class="result_c">
              <div v-for="(r, indexr) in item.result" class="result">
                {{ r.before }}<span style="color: red;">{{ r.keyword }}</span>{{ r.after }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { getBookRdP, getCurrentBook } from "../api/ziLiao";
import { getAllATag, getMatchResults, processHightLightHtml } from "../api/bookRead";
import { ColorPicker } from "vue3-colorpicker";
import { onBackKeyDown } from "tauri-plugin-app-events-api";
import Vue3TouchEvents from "vue3-touch-events";
import { Overlay, Progress, Stepper, Switch, Slider } from "vant";
import { selectAllZiLiao } from "../api/dbUtils";
export default {
  name: "Test",
  components: {
    VanOverlay: Overlay,
    VanProgress: Progress,
    ColorPicker,
    VanStepper: Stepper,
    VanSwitch: Switch,
    VanSlider: Slider,
  },
  data() {
    return {
      searchKW: '',
      showMuLu: false,
      bookResultL: [],
    };
  },
  created() {

  },

  props: {},
  methods: {
    async searchBookByK() {
      this.bookResultL = [...[]]
      let allZL = await selectAllZiLiao();
      allZL.forEach((book) => {
        let bkR = getMatchResults(this.searchKW, book.zhenwen, 10);
        if (bkR.length > 0) {
          this.bookResultL.push({ title: book.title, result: bkR })
        }
      })
    },
    getRdPercent(tit) {
      return getBookRdP(tit);
    },
    search(event) {
      if (event.key === 'Enter') {
        this.searchBookByK();
      }
    },
    onCancelSearch() {
      this.searchKW = ''
    },
    toReader(tit) {
      this.$router.push({ path: "/bookRead", query: { title: tit, showSearch: true, keyword: this.searchKW } });
    },
  },
  mounted() {
  },
  directives: {
    ...Vue3TouchEvents.directives,
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  height: 100vh;
  width: 100vw;
  background-color: var(--lr_lcbgc);
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 0;
  align-items: center;
  left: 0;

  .sub_title {
    width: 100vw;
    background-color: var(--nav_bg_color);
    display: flex;
    flex-direction: column;
    color: var(--cart_bg_color);

    .tit_txt {
      .ic {
        i {
          font-size: 20rem;
          // color: var(--lr_btnitc);

          &:active {
            transition: transform 0.3s ease;
            transform: scale(1.2)
          }
        }

        text-align: center;
        width: 14vw;
        // background-color: #531c1c;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      width: 100vw;
      height: 30rem;
      line-height: 30rem;
      font-size: 18rem;
      font-weight: bolder;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .sctotal {
    width: 92vw;
    height: 29rem;
    line-height: 29rem;
    font-size: 17.5rem;
    margin-top: 4rem;
    font-weight: bold;
  }

  .search_wrapper {
    border: 2rem solid var(--cart_bg_color);
    display: flex;
    align-items: center;
    margin-top: 8rem;
    height: 30rem;
    width: 90vw;
    //  background-color: #634a5b;
    border-radius: 17rem;
    line-height: 36rem;

    .left {
      width: 31rem;
      height: 24rem;
      line-height: 24rem;
      text-align: center;
      font-size: 18rem;
    }

    input {
      background-color: #ffffff;
      border: none;
      outline: none;
      height: 30rem;
    }

    input::-webkit-search-cancel-button {
      display: none;
    }

    .mid {
      width: calc(94vw - 84rem);
      font-size: 16rem;
      overflow-x: auto;
      // white-space: nowrap;
      /* 禁止文本换行 */
      overflow-x: auto;
      /* 内容超出时显示水平滚动条 */
      overflow-y: hidden;
      /* 隐藏垂直滚动条 */

      /* 设置固定宽度 */
      /* 可选：平滑滚动效果 */
      scroll-behavior: smooth;
    }

    .right {
      width: 36rem;
      height: 24rem;
      line-height: 24rem;
      text-align: center;
      font-size: 13rem;
      background-color: var(--cart_bg_color);
      border-radius: 12rem;
      margin-right: 3rem;
      margin-left: 8rem;
      color: white;
      padding-left: 3rem;
      padding-right: 3rem;
    }

    .right:active {
      transition: transform 0.3s ease;
      transform: scale(1.2)
    }

    .editable-div {
      // border: 1rem solid #ddd;
      border-radius: 6rem;
      /* 确保有足够编辑空间 */
      outline: none;
      /* 移除默认聚焦边框 */
    }

    /* 聚焦时的样式 */
    // .editable-div:focus {
    //   border-color: #3B82F6;
    //   box-shadow: 0 0 0 2rem rgba(59, 130, 246, 0.2);
    // }
  }

  .book_content {
    margin-top: 10rem;
    width: fit-content;
    width: 92vw;
    overflow: auto;
    height: calc(100vh - var(--safe-top) - 116rem);

    .book_item {
      margin-bottom: 4vw;
      height: fit-content;
      width: 88vw;
      padding: 2vw;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6rem;
      overflow: hidden;
      background-color: var(--lr_lbgc);

      .search_results {
        margin-left: 4vw;
        height: calc(36vw + 18rem);
        width: 56vw;

        .result_item {
          display: flex;
          flex-direction: column;
          align-items: center;


          .total {
            width: 56vw;
            height: 18rem;
            line-height: 18rem;
            font-size: 14rem;
            margin-bottom: 5rem;
            font-weight: bold;
          }

          .result_c {
            max-height: calc(36vw - 5rem);
            display: flex;
            flex-direction: column;
            overflow: scroll;

            .result {
              margin-bottom: 10rem;
              width: 56vw;
              line-height: 15rem;
              font-size: 13rem;
              font-weight: 500;
            }
          }

        }
      }

      .book {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 28vw;

        .tit {
          padding-top: 2rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 28vw;
          font-size: 14rem;
          font-weight: 500;

          .bktit {
            flex-grow: 1;
            white-space: nowrap;
            /* 禁止文本换行 */
            overflow: hidden;
            /* 隐藏超出容器的内容 */
            text-overflow: ellipsis;
            /* 超出部分显示省略号 */
          }
        }

        .book_fengmian {
          background: url("../assets/素材/bookImg.png") no-repeat center / cover;
          width: 28vw;
          height: 36vw;

          // background-color: #223751;
          display: flex;

          .right {
            width: 3vw;
            border-left: 1rem solid white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;

            div {
              width: 100%;
              height: 20%;
              border-top: 0.5rem solid white;
              border-bottom: 0.5rem solid white;
            }
          }

          .left {
            height: 100%;
            flex-grow: 1;

            .b1 {
              padding: 2rem;
              height: fit-content;
              background-color: #fff;
              margin-top: 3vw;
              margin-left: 3vw;
              width: fit-content;
              height: fit-content;

              .b2 {
                padding: 1rem;
                max-height: 24vw;
                /* 超出部分显示垂直滚动条 */
                overflow-y: auto;
                /* 隐藏横向滚动条（如果不需要） */
                overflow-x: hidden;
                white-space: nowrap;
                /* 核心：设置文字竖向排列 */
                writing-mode: vertical-rl;
                /* 从右到左竖向排列 */
                /* 可选：从左到右竖向排列 */
                /* writing-mode: vertical-lr; */
                font-size: 10rem;
                border: 1rem solid black;
              }
            }
          }
        }
      }
    }
  }
}
</style>